<!--组件-输入框-->
<template>
  <div :class="[select ? 'udRed-b1' : 'bk4']">
    <input ref="refPrice" class="frame-input text1" 
    v-model="value"  type="number" :placeholder="placeholder" 
    maxlength="10"
    @input="onInput" @focus="onFocus" @blur="onBlur">

    <template v-if="changeValue">
      <div class="frame-but" @click="jianClick"><text class="font48 text3">-</text></div>
      <div class="frame-line bg4"></div>
      <div class="frame-but" @click="jiaClick"><text class="font48 text3">+</text></div>
    </template>
    <text v-if="unit" class="font28 text2">{{unit}}</text>
  </div>
</template>

<script>

import jconfig from "@/_js/config"
import jmath from "@/_js/math"

const weexFunction = weex.requireModule("WeexFunction");

export default {

  model:{
    prop:"value",
    event:"change",
  },

  props:{

    value: {
      type:String,
      default:'',
    },

    placeholder: {
      type:String,
      default:'',
    },

    changeValue: {
      type:String,
      default:'',
    },

    unit: {
      type:String,
      default:'',
    },

    selectColor:{
      type:String,
      default:'',
    }
  },

  data() {
    return {
      config:jconfig,

      select: false,
    };
  },

  mounted(){
  },

  methods:{

    valueChange(value) {
      this.value = value;
      this.$emit("change", value);
      this.$emit("input", value);
    },

    /********************************************** 输入框回调*/
    //输入框-选中
    onFocus(e) {
      this.select = true;
    },

    //输入框-取消选中
    onBlur(e) {
      this.select = false;
    },

    //输入内容改变
    onInput(e){
      this.valueChange(e.value);
    },

    /********************************************** 点击*/
    //加
    jiaClick() {
      var value = jmath.jia(this.value, this.changeValue);
      value = value < 0 ? '0' : value;
      this.valueChange(value);
    },

    //减
    jianClick() {
      var value = jmath.jian(this.value, this.changeValue);
      value = value < 0 ? '0' : value;
      this.valueChange(value);
    }
  }
}
</script>

<style src="@/_css/style.css" ></style>
<style scoped>

.frame-input{
  flex: 1;
  height:80px;
  font-size:28px;
  font-family:PingFangSC-Medium,PingFang SC;
  font-weight:500;
  background-color:transparent;
  placeholder-color:#616F93;
}
.frame-but{
  width: 40px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 40px;
  margin-left: 6px;
  margin-right: 6px;
}
</style>
